<!--
 * @Description: 所有内容展示界面，
                 左侧为所有可显示分类的树，右侧为该分类下的内容
                 当选择根节点时，展示所有内容
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2020-09-21 14:04:45
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-19 15:10:49
-->

<template>
  <multipane
    class="custom-resizer"
    layout="vertical"
  >
    <div class="pane1">
      <div
        v-loading="loading"
        class="pane-container"
      >
        <div class="search-container">
          <fks-input
            v-model="filterText"
            maxlength="50"
            :placeholder="LANG.INPUT_CATEGORY"
            clearable
            suffix-icon="fks-icon-search"
          />
        </div>
        <div class="tree-container">
          <fks-tree
            ref="tree"
            highlight-current
            :data="dataTree"
            :filter-node-method="filterNode"
            node-key="name"
            :current-node-key="LANG.CONTENT_LIST"
            :expand-on-click-node="false"
            :props="{
              label: 'name',
              children: 'children'
            }"
            show-icon
            default-expand-all
            @node-click="handleClick"
          />
        </div>
      </div>
    </div>
    <!-- <span
          id="sidebarButton"
          :class="{ sidebarButtonToggle: !isCollapsed }"
          @click="collapse"
    ></span>-->
    <multipane-resizer />
    <div
      class="pane"
      :style="{ flexGrow: 1 }"
    >
      <!-- <div class="right-container"> -->
      <!-- <fks-button @click="collapse">1</fks-button> -->
      <!-- <div style="height: 100%"> -->
      <content-list
        :category-id="categoryId"
        :table-title="current_title"
      />
    </div>
    <!-- </div> -->
  </multipane>
</template>


<script>
import { getCategoryList } from '@/modules/Content/api'
import ContentList from '../ContentList/index'
import mix from '@/mixins/module'
import { Multipane, MultipaneResizer } from 'vue-multipane'
export default {
  name: 'AllContent',
  components: {
    ContentList,
    Multipane,
    MultipaneResizer
  },
  mixins: [mix],
  data() {
    return {
      filterText: '',
      loading: false,
      current_title: '',
      categoryId: '',
      categoryList: [],
      isCollapsed: false //左侧是否收缩
    }
  },
  computed: {
    contentList() {
      return this.LANG.CONTENT_LIST
    },
    dataTree() {
      return [
        {
          id: '',
          name: this.LANG.ALL_CONTENT,
          children: this.categoryList
        }
      ]
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    collapse() {
      if (this.isCollapsed) {
        //左侧不收缩
        this.$refs.example.percent = 17
        this.isCollapsed = false
      } else {
        //左侧收缩
        this.$refs.example.percent = 0
        this.isCollapsed = true
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleClick(node) {
      this.current_title = node.name
      this.categoryId = node.id
    },
    initData() {
      this.current_title = this.contentList
      this.getAllCategory()
    },
    @permission('content:list:category')
    getAllCategory() {
      this.loading = true
      this.categoryList = []
      let temp = {
        page: 1,
        size: 1000
      }
      getCategoryList(temp)
        .then((res) => {
          if (res.status) {
            this.categoryList = []
            let data = res.data.voList
            data.forEach((item) => {
              let obj = {
                id: item.category.id,
                name: item.category.categoryName
              }
              if (!item.category.isHide) {
                this.categoryList.push(obj)
              }
            })
          } else {
            this.categoryList = []
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.categoryList = []
        })
    },
    clearData() {
      this.dataTree = []
    },
    /**
     * 为解决max-percent不起作用的方法
     * @issues https://github.com/PanJiaChen/vue-split-pane/issues/17
     * @params this.$children[0] 表示vue-split-pane组件
     */
    resize() {
      if (this.$children[0].percent > 50) {
        this.$children[0].percent = 50
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.custom-resizer {
  width: 100%;
  height: 100%;
}

.custom-resizer > .pane {
  width: calc(100% - 300px);
  overflow: hidden;
  text-align: left;
  background: #fff;
}

.pane1 {
  width: 284px;
  overflow: hidden;
  text-align: left;
  background: #fff;
}

.custom-resizer > .multipane-resizer {
  position: relative;
  left: 0;
  width: 16px;
  margin: 0;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 3px;
    height: 40px;
    margin-top: -20px;
    margin-left: -1.5px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }

  &:hover {
    &::before {
      border-color: #999;
    }
  }
}

.pane-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(100% - 64px);
  height: calc(100% - 48px);
  margin: 24px 32px;
  overflow: hidden;
}

.search-container {
  padding-bottom: 16px;
}

.tree-container {
  overflow: auto;
}
</style>